<template>
  <section>
    <div class="columns">
      <div class="column is-full">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="is-size-4 has-text-weight-bold">{{$t('common.updateBlog')}}</span>
          </div>
          <div>
            <el-form :model="topic" ref="topic" class="demo-topic">
              <el-form-item prop="title">
                <el-input
                  v-model="topic.title"
                  :placeholder="$t('common.title')"
                ></el-input>
              </el-form-item>

              <EDITOR v-model="editorContent"></EDITOR>

              <b-taginput
                v-model="tags"
                class="my-3"
                maxlength="15"
                maxtags="3"
                ellipsis
                :placeholder="$t('message.addTags')"
              />
              <el-form-item class="mt-3">
                <el-button type="primary" @click="handleUpdate()"
                  >{{$t('common.create')}}
                </el-button>
                <el-button @click="resetForm('topic')">{{$t('common.reset')}}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </div>
  </section>
</template>

<script>
import { getTopic, update } from "@/api/post";
import editor from '@/components/editor/editor'

export default {
  name: "TopicEdit",
  components: {EDITOR: editor},
  data() {
    return {
      topic: {},
      tags: [],
      editorContent:'',
      dto:{id:'',
      title:'',
      content:'',
      tags:[]
      }
    };
  },
  created() {
    this.fetchTopic();
  },
  methods: {
    fetchTopic() {
      
      getTopic(this.$route.params.id).then((value) => {
       
        this.topic = value.data.topic;
        this.tags = value.data.tags.map(tag => tag.name);
        this.editorContent = this.topic.content
      });
    },
    handleUpdate: function () {

      
      if(this.topic.title==null||
      this.topic.title==''){
        alert('标题不可以为空')
            return false
      }
      
      if (  
            
            this.editorContent == null ||
            this.editorContent == ' '||
            this.editorContent.length==0
            
          ) {
            alert('文章内容不可以为空')
            return false
          }
          if (this.tags == null || this.tags.length === 0) {
            alert('标签不可以为空')
            return false
          }
      this.topic.content = this.editorContent
      this.dto.id=this.topic.id
      this.dto.title=this.topic.title
      this.dto.content=this.topic.content
      this.dto.tags=this.tags
      
      update(this.dto).then((response) => {
        const { data } = response;
        
        setTimeout(() => {
          this.$router.push({
            name: "post-detail",
            params: { id: data.id },
          });
        }, 800);
      });


     
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.editorContent = "";
      this.tags = "";
    },
  },
};
</script>

<style>
</style>